<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>重置密码</title>


    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">


    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
</head>

<style>
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .bg-style {
        background-color: rgba(255, 255, 255, 0.3);
        margin-top: 120px;
        height: 530px;
        overflow: auto;
    }

    .login-box {
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.322);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        max-width: 400px;
        margin: 30px auto 0;
        backdrop-filter: blur(10px);
    }


    .login-logo {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }

    .login-box-msg {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
        color: #666;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-control {
        height: 40px;
        border-radius: 5px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    .form-control:focus {
        outline: none;
        border-color: #66afe9;
        box-shadow: 0 0 5px rgba(102, 175, 233, 0.5);
    }

    .form-control-feedback {
        position: absolute;
        top: 20px !important;
        right: 10px;
        transform: translateY(-50%);
        color: #ccc;
    }

    .btn {
        height: 40px;
        border-radius: 5px;
        background-color: #337ab7;
        color: #fff;
        border: none;
        padding: 0 20px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #286090;
    }
</style>

<body style="background-image: url('../img/background.jpg');background-repeat: no-repeat;background-size: cover;">
    <div class="bg-style">
        <div class="login-box">

            <div class="login-logo" style="margin-top: 20px;"> <b>电子钱包</b>后台管理系统 </div>
            <div class="login-box-msg">重置密码</div>
            <div id="password-login">
                <div class="form-group has-feedback" style="position: relative;">
                    <input type="password" class="form-control" name="newPassword" placeholder="新密码" maxlength="11">
                    <span class="glyphicon glyphicon-lock form-control-feedback"
                        style="position: absolute; right: 10px; top: 38%; transform: translateY(-50%);font-size: 20px;"></span>
                    <span class="help-block" style="color: red; display: none;">密码长度应为6-12位</span>
                </div>
                <div class="form-group has-feedback" style="position: relative;">
                    <input type="password" class="form-control" name="againNewPassword" placeholder="确认密码"
                        maxlength="12">
                    <span class="fa fa-check-square-o form-control-feedback"
                        style="position: absolute; right: 10px; top: 38%; transform: translateY(-50%);font-size: 20px;"></span>
                    <span class="help-block" style="color: red; display: none;">两次密码不一致</span>
                </div>

            </div>

            <div class="row" id="row">
                <div class="col-xs-12">
                    <button id="confirmation-btn" class="btn btn-primary btn-block">确认</button>
                </div>
            </div>

        </div>
    </div>
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/iCheck/icheck.min.js"></script>
    <script>

        // 账号登陆
        $(function () {

            // 监听新密码输入框的失去焦点事件
            $('input[name="newPassword"]').on('blur', function () {
                var passwordReg = /^\w{6,12}$/; // 密码正则表达式
                if (!passwordReg.test($(this).val())) {
                    $(this).parent().addClass('has-error');
                    $(this).siblings('.help-block').show();
                } else {
                    $(this).parent().removeClass('has-error');
                    $(this).siblings('.help-block').hide();
                }
            });

            // 监听确认密码输入框的失去焦点事件
            $('input[name="againNewPassword"]').on('blur', function () {
                if ($(this).val() !== $('input[name="newPassword"]').val()) {
                    $(this).parent().addClass('has-error');
                    $(this).siblings('.help-block').show();
                } else {
                    $(this).parent().removeClass('has-error');
                    $(this).siblings('.help-block').hide();
                }
            });



            // 监听确认按钮的点击事件
            $('#confirmation-btn').click(function () {
                // 获取新密码和确认密码
                var newPassword = $('input[name="newPassword"]').val();
                var againNewPassword = $('input[name="againNewPassword"]').val();

                // 验证新密码和确认密码
                var passwordReg = /^\w{6,12}$/; // 密码正则表达式

                if (!passwordReg.test(newPassword)) {
                    $('input[name="newPassword"]').parent().addClass('has-error');
                    $('input[name="newPassword"]').siblings('.help-block').show();
                    return;
                }


                if (newPassword !== againNewPassword) {
                    $('input[name="againNewPassword"]').parent().addClass('has-error');
                    $('input[name="againNewPassword"]').siblings('.help-block').show();
                    return;
                }


                var phone = localStorage.getItem('phone');

                // 发起 AJAX 请求进行登录验证
                $.ajax({
                    url: 'http://localhost:8080/user/forgotPasswordController',
                    type: "POST",
                    data: {
                        phone: phone,
                        newPassword: newPassword,
                        againNewPassword: againNewPassword
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.code === 200) {
                            alert("修改成功,请登录");
                            // 跳转到登录页面
                            window.location.href = 'employee-login.html';

                        } else {
                            // 登录失败，显示错误信息
                            alert(result.msg);
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // 处理请求错误
                        console.error(error);
                        alert("请求失败");
                    }
                });
            })
        });

        $(function () {
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        });
    </script>
</body>

</html>